<template>
  <div class="app-contact-message">
    <el-card shadow="never" style="border: 0">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon autocomplete="off" label-width="80px" label-position="right" :rules="rules" class="app-contact-ruleForm">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="留言" prop="content">
          <el-input v-model="ruleForm.content" maxlength="300" :rows="10" show-word-limit type="textarea" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="verify">
          <div class="flex justify-between" prop="verify">
            <el-input v-model="ruleForm.verify" placeholder="验证码" @keyup.enter="submitForm(ruleFormRef)">
              <template #prefix>
                <el-icon class="el-input__icon"><IMingcuteSafetyCertificateLine /></el-icon>
              </template>
            </el-input>
            <img :src="captchaImg" alt="" class="img-captcha cursor-pointer ml-5" @click="getCaptcha" />
          </div>
        </el-form-item>
        <el-form-item class="pt-3">
          <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ElNotification, FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  content: '',
  email: '',
  verify: '',
})
const state: any = reactive({
  loading: false,
})

const API_URL = import.meta.env.VITE_API_URL
const imgUrl = `${API_URL}/web/common/captcha`
const captchaImg = ref(imgUrl)
const getCaptcha = () => {
  captchaImg.value = `${imgUrl}?${Math.random()}`
}

getCaptcha()

const rules = reactive<FormRules>({
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  content: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 1, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' },
  ],
  verify: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (!valid) {
      return
    }

    fetch(`${API_URL}/web/message`, {
      credentials: 'include',
      method: 'POST',
      body: JSON.stringify(ruleForm as any),
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
    })
      .then((response) => response.json())
      .then((res) => {
        const { code, message } = res
        const errMsg = message || '系统异常，请稍候再试'

        if (typeof code !== 'undefined' && code !== 0) {
          ElNotification.error(errMsg)
        }

        code === 0 &&
          ElNotification({
            message: `留言成功`,
            type: 'success',
            duration: 3000,
          })

        state.loading = true
      })
      .catch((err: any) => {
        console.log('err', err)
        state.loading = true

        getCaptcha()
      })
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style></style>
